<!--
 * @Author: your name
 * @Date: 2021-08-22 21:48:02
 * @LastEditTime: 2021-08-24 16:34:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /web-blog/src/pages/blog/label.vue
-->
<template>
  <div>
    <div class="heade">
      <a-input-search placeholder="输入关键字搜索" style="width: 200px" @search="onSearch" />
      <div class="label navigation-link">
        <a href="index"> 首页 </a>
      </div>
      <div class="label navigation-link" > 
        <a-dropdown>
          <a class="ant-dropdown-link" @click="e => e.preventDefault()">
            类别 
            <span class="arrow"></span> 
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a href="javascript:;">分类</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;" @click="goLabel">标签</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
      <div class="label navigation-link">项目</div>
      <div class="label navigation-link" @click="goTimeLine">时间轴</div>
      <div class="label navigation-link">
        <a href="https://gitee.com/woaink"> Github </a>
      </div>
    </div>
    <aside class="leftSide">
      <div class="contentBox">
        <div class="classificatTitle">学习日记</div>
        <div class="articleList">一篇</div>
        <div class="articleList">两篇</div>
        <div class="articleList">三篇</div>
        <div class="articleList">四篇</div>
      </div>
    </aside>
    <div class="main">
      <div v-html="rich" class="rich"></div>
    </div>
  </div>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      rich: '<span style="font-family:微软雅黑;font-size:14px;">继徐翔之后，又出一股市奇才，自创"狙击涨停三板斧"，被散户称之为“草根股神”的</span><span style="font-family:微软雅黑;font-size:14px;">秦泽晨引大量媒体报道！</span>'
    }
  },
  methods: {
    goLabel() {
      this.$router.push('/label');
      console.log(66);
    },
    /**
     * 跳转到时间线页面
     */
    goTimeLine() {
      this.$router.push('/timeline')
    }
  }
}
</script>

<style lang="less" scoped>
  @import '../../styles/a.css';
  .heade {
    background-color: #fff;
    box-sizing: border-box;
    border-bottom: 1px solid #eaecef;
    justify-content: flex-end;
    margin-right: 20;
    align-items: center;
    padding-right: 20px;
    position: fixed;
    display: flex;
    z-index: 20;
    height: 60px;
    right: 0;
    top: 0;
    left: 0;
  }

  .leftSide {
    width: 200px;
    font-size: 16px;
    background-color: #fff;
    position: fixed;
    z-index: 10;
    margin: 0;
    top: 59px;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    border-right: 1px solid #eaecef;
    overflow-y: auto;
  }

  .main {
    display: block;
    margin-top: 130px;
    margin-left: 300px;
    font-size: 16px;
    overflow: auto;
  }

  .contentBox {
    margin-left: 10px;
    margin-top: 10px;
  }

  .classificatTitle {
    font-size: 17px;
    font-weight: 600;
    color: #333;
  }

  .articleList {
    margin-left: 15px;
    font-size: 14px;
    cursor:pointer;
  }

  /deep/.ant-input-affix-wrapper .ant-input:not(:last-child) {
    border-radius: 20px;
  }

  .label {
    color: #304455;
    margin: 0 10px 0 10px;
    cursor:pointer;
  }

  .arrow {
    display: inline-block;
    vertical-align: middle;
    margin-top: -1px;
    margin-left: 3px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #4f5959;
  }

  .navigation-link {
	display: block;
	position: relative;
	padding: 5px 10px;
	text-decoration: none;
	color: #333;
	-webkit-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

.navigation-link:before {
	content: "";
	position: absolute;
	bottom: 0;
	width: 0;
	border-bottom: solid 2px;
}

.navigation-link:before {
	left: 0;
}

.navigation-link:hover {
	color: #009688;
}

.navigation-link:hover:before {
	width: 100%;
}

.navigation-link:before {
	-webkit-transition: width .2s ease-in-out;
	transition: width .2s ease-in-out;
}

</style>